import React, { FC } from 'react'
import styles from './QuestionCard.module.scss'
import { Button, Space, Divider, Tag, Popconfirm, Modal, message } from 'antd'
import { EditOutlined, LineChartOutlined, StarOutlined, CopyOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import { useNavigate, Link } from 'react-router-dom'

export type PropsType = {
  _id: number
  title: string
  isStar: boolean
  isPublished: boolean
  answerCount: number
  createdAt: string
}

const { confirm } = Modal

const QeustionCard: FC<PropsType> = (props: PropsType) => {
  const { _id, title, createdAt, answerCount, isPublished, isStar } = props
  const nav = useNavigate()

  function duplicate () {
    // const res = confirm('是否复制')
    // if(res) alert('执行复制')
    message.info('复制')
  }
  function del() {
    confirm({
      title: '确定删除该问卷？',
      icon: <ExclamationCircleOutlined />,
      onOk: () => { message.info('删除') }
    })
  }
  return (
    <>
      <div className={styles.container}>
        <div className={styles.title}>
          <div className={styles.left}>
            <Link to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}>
              <Space>
                {isStar && <StarOutlined style={{'color': 'red'}} /> }
                {title}
              </Space>
            </Link>
          </div>
          <div className={styles.right}>
            <Space>
              {isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>}
              
              <span>答卷: {answerCount}</span>
              
              <span>{ createdAt }</span>
            </Space>
          </div>
        </div>
        <Divider style={{'margin': '12px 0'}}></Divider>
        <div className={styles['button-container']}>
          <div className={styles.left}>
            <Space>
              <Button type="text" size="small" icon={<EditOutlined /> } onClick={() => {nav(`/question/edit/${_id}`)}}>编辑问卷</Button>
              <Button type="text" size="small" icon={<LineChartOutlined />} onClick={() => {nav(`/question/stat/${_id}`)}} disabled={!isPublished}>问卷统计</Button>
            </Space>
          </div>
          <div className={styles.right}>
            <Space>
              <Button type="text" size="small" icon={<StarOutlined />} onClick={() => { nav(`/question/edit/${_id}`) }}>{isStar ? '取消标星' : '标星'}</Button>
              <Popconfirm title="确定复制该问卷？" okText="确定" cancelText="取消" onConfirm={duplicate}>
                <Button type="text" size="small" icon={<CopyOutlined />}>复制</Button>
              </Popconfirm>
              
              <Button type="text" size="small" icon={<DeleteOutlined />} onClick={del}>删除</Button>
            </Space>
          </div>
        </div>
      </div>
    </>
  )
}

export default QeustionCard